

<template>
  <div class="platformRrules" style="overflow-y: hidden">
    <!-- 中间内容 -->
    <div class="content">
      <!-- 筛选 -->
      <div class="screen">
        <!-- 表单查询 -->
        <div class="screen_from">
          <el-form :model="baeterHall" ref="myForm">
            <el-form-item label="需求名称" prop="keyword">
              <el-input clearable v-model="baeterHall.keyword" />
            </el-form-item>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="来源企业" prop="company_id">
                  <el-select
                    clearable
                    v-model="baeterHall.company_id"
                    placeholder="请选择来源企业"
                  >
                    <el-option
                      v-for="item in sourceCompanyList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="行业类目" prop="category_id">
                  <el-select
                    clearable
                    v-model="baeterHall.category_id"
                    placeholder="请选择行业类目"
                  >
                    <el-option
                      v-for="item in IndustryCategoriesList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="发货地" prop="address_ids">
                  <el-cascader
                    clearable
                    v-model="baeterHall.address_ids"
                    :options="areaData"
                    :props="props"
                    @change="handleChange"
                    expandTrigger="hover"
                    placeholder="请选择省/市/区/街道"
                    style="width: 100%"
                    ref="cascaderAddress"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6" style="padding-left: 25px">
                <el-form-item label="企业类型" prop="type">
                  <el-select
                    clearable
                    v-model="baeterHall.type"
                    placeholder="请选择企业类型"
                  >
                    <el-option
                      v-for="item in enterpriseTypeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="20"></el-col>
              <el-col :span="2">
                <el-form-item label="">
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="padding-left: 30px">
                <el-form-item>
                  <el-button @click="onResert(myForm)">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 头部筛选 -->
        <div class="screen_tab">
          <div
            class="screen_tab_zh"
            :class="is_tab == 1 ? 'on_screen_tab' : 'screen_tab_zh'"
            @click="onScreenTab(1)"
          >
            综合
          </div>
          <div
            class="screen_tab_zx"
            :class="is_tab == 2 ? 'on_screen_tab' : 'screen_tab_zh'"
            @click="onScreenTab(2)"
          >
            最新
          </div>
          <div
            class="screen_tab_xl"
            :class="is_tab == 3 ? 'on_screen_tab' : 'screen_tab_zh'"
            @click="onScreenTab(3)"
          >
            销量
          </div>
          <div
            class="screen_tab_jg"
            :class="is_tab == 4 ? 'on_screen_tab' : 'screen_tab_zh'"
            @click="onScreenTab(4)"
          >
            <div>价格</div>
            <div
              style="
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <el-icon
                class="caretTop"
                :class="isClickTop == 1 ? 'oncaretTop' : 'caretTop'"
                @click="onScreenTabUp()"
              >
                <CaretTop />
              </el-icon>
              <el-icon
                class="caretBottom"
                :class="isClickBot == 1 ? 'oncaretBottom' : 'caretBottom'"
                @click="onScreenTabDown()"
              >
                <CaretBottom />
              </el-icon>
            </div>
          </div>
        </div>
      </div>

      <div
        v-if="screenDating.length > 0"
        style="border: 1px solid #e6e6e6; margin-top: 20px"
        class="content_list"
      >
        <div
          class="content_text"
          v-for="(item, index) in screenDating"
          :key="index"
        >
          <div class="content_text_img">
            <img :src="item.image" alt="" />
          </div>
          <div class="content_text_tittle">
            <div class="biaoti">{{ item.name }}</div>
            <div class="biaoti">{{ item.category }}</div>
            <div class="biaoti">来源企业：{{ item.company }}</div>
          </div>
          <div class="content_text_info">
            <div class="biaoti">
              单价：{{ item.min_price }}—{{ item.max_price }}
            </div>
            <!-- <div class="biaoti">规格：{{ item.guige }}</div> -->
          </div>
          <div class="content_text_fh">
            <div class="biaoti">
              发货地：{{ item.province }}{{ item.city }}{{ item.county }}
            </div>
            <div class="biaoti">上架日期：{{ item.createtime }}</div>
          </div>
          <div class="content_text_ck">
            <el-button type="primary" @click="onDetail(item.id, item.tittle)"
              >查看详情</el-button
            >
          </div>
        </div>
      </div>
      <div v-else class="none_list">
        <!-- <span>暂无内容</span> -->
        <NoContent></NoContent>
      </div>
    </div>
    <el-dialog
      v-model="submitVisible"
      width="544"
      align-center
      :show-close="false"
      :destroy-on-close="true"
      center
      style="border-radius: 12px;"
    >
      <div class="tip-text flex justify-center">无法查看详情，请先登录</div>
      <div class="flex justify-center">
        <el-button
          style="
            width: 140px;
            height: 42px;
            background: rgba(36, 135, 232, 0.12);
            color: #2487e8;
          "
          round
          @click="submitVisible = false"
          >取消</el-button
        >
        <el-button
          type="primary"
          style="width: 140px; height: 42px; background: #2487e8"
          round
          @click="onLogin"
          >去登录</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
    
<script setup>
import { onMounted, ref } from "vue";
import NoContent from "../../../components/NoContent.vue";
import blackImg from "../../../assets/images/black.png";
import logoImg from "../../../assets/images/logo.png";
import { useRouter } from "vue-router";
import { useRoute } from "vue-router";
import { BarterHall, CompanyAll } from "@/api/barterhall";
import { Category, Area } from "@/api/common.js";
import { getUserInfo, removeUserInfo } from "@/service";
const router = useRouter();
const route = useRoute();
defineProps({
  msg: String,
});
const isLoginToken = ref("");
const submitVisible = ref(false);
onMounted(() => {
  console.log("tagsssss", route.query.inputMsg);
  //判断是否有登录
  const userInfo = getUserInfo();
  isLoginToken.value = userInfo.token;
  console.log("ssdd11", userInfo);

  if (route.query.inputMsg) {
    baeterHall.value.keyword = route.query.inputMsg;
    //调用商品函数
    getBarterHall();
  } else {
    getBarterHall();
  }
  getCompanyAll();
  getCategory();
  getArea();
});
// 下拉框
// 来源企业
const sourceCompanyList = ref([]);
//行业类目
const IndustryCategoriesList = ref([]);
//发货地
const props = {
  expandTrigger: "hover",
  label: "name",
  value: "id",
  children: "children",
};
const areaData = ref([]);
//企业类型
const enterpriseTypeList = ref([
  { id: 1, name: "线上" },
  { id: 2, name: "线下" },
]);

//筛选
const baeterHall = ref({
  keyword: "", //关键词
  company_id: "", //来源企业 id
  category_id: "", //行业类目id
  // placeOfDelivery: "", //省市区总和
  address_ids: [],
  // address_idsobj: [],
  province: "", //省
  city: "", //市
  county: "", //区
  type: "", //1线上 2线下
  order_field: "socre", //排序字段：socre综合，最新new，销量sales，价格price
  order_type: "", //排序类型：desc降序，asc升序
  page: 1,
  page_size: 999,
});

//获取所有企业
const getCompanyAll = () => {
  CompanyAll()
    .then((res) => {
      if (res.code == 1) {
        sourceCompanyList.value = res.data;
      }
    })
    .catch((err) => {});
};

//获取行业类目
const getCategory = () => {
  Category()
    .then((res) => {
      if (res.code == 1) {
        IndustryCategoriesList.value = res.data;
      }
    })
    .catch((err) => {});
};

//获取省市区
const getArea = () => {
  Area()
    .then((res) => {
      if (res.code == 1) {
        areaData.value = res.data;
      }
    })
    .catch((err) => {});
};
//获取节点
const cascaderAddress = ref(null);
const handleChange = (e, form, thsAreaCode, value) => {
  if (cascaderAddress.value.getCheckedNodes()[0] != undefined) {
    thsAreaCode = cascaderAddress.value.getCheckedNodes()[0].pathLabels; // 注意2： 获取label值
    baeterHall.value.province = thsAreaCode[0];
    baeterHall.value.city = thsAreaCode[1];
    baeterHall.value.county = thsAreaCode[2];
  } else {
    baeterHall.value.province = "";
    baeterHall.value.city = "";
    baeterHall.value.county = "";
  }

  // console.log(value);
};

//表单数据
const screenDating = ref([]);
//获取商品列表 默认什么都不传
const getBarterHall = () => {
  BarterHall(baeterHall.value)
    .then((res) => {
      if (res.code == 1) {
        screenDating.value = res.data.data;
        console.log("res", res.data.data);
      }
    })
    .catch((err) => {});
};

const onSubmit = () => {
  if (baeterHall.value.address_ids.length == 0) {
    baeterHall.value.address_ids = [];
  } else {
    baeterHall.value.address_ids = baeterHall.value.address_ids.join(",");
  }
  BarterHall(baeterHall.value)
    .then((res) => {
      if (res.code == 1) {
        screenDating.value = res.data.data;
        console.log("res", res.data.data);
      }
    })
    .catch((err) => {});
};
//重置
const myForm = ref(null);
const onResert = (myForm) => {
  baeterHall.value.province = "";
  baeterHall.value.city = "";
  baeterHall.value.county = "";
  if (!myForm) return;
  myForm.resetFields();
  getBarterHall();
};
//切换
const is_tab = ref(1);
const onScreenTab = (tab_id) => {
  console.log("tab_id", tab_id);
  if (tab_id == 1) {
    //综合
    is_tab.value = tab_id;
    baeterHall.value.order_field = "socre";
    //调用商品列表
    onSubmit();
  }
  if (tab_id == 2) {
    //综合
    is_tab.value = tab_id;
    baeterHall.value.order_field = "new";
    //调用商品列表
    onSubmit();
  }
  if (tab_id == 3) {
    //综合
    is_tab.value = tab_id;
    baeterHall.value.order_field = "sales";
    //调用商品列表
    onSubmit();
  }
  if (tab_id == 4) {
    //综合
    is_tab.value = tab_id;
    baeterHall.value.order_field = "price";
    //调用商品列表
    onSubmit();
  }
};
//价格筛选
//高
const isClickTop = ref(0);
const isClickBot = ref(0);
const onScreenTabUp = () => {
  isClickBot.value = 1;
  isClickTop.value = 0;
  baeterHall.value.order_type = "asc";
  getBarterHall();
};
//底
const onScreenTabDown = () => {
  isClickTop.value = 1;
  isClickBot.value = 0;
  baeterHall.value.order_type = "desc";
  getBarterHall();
};

//查看详情
const onDetail = (id, title) => {
  if (!isLoginToken.value) {
    submitVisible.value = true;
  } else {
    console.log('22',22222);

    router.push({
      path: "/barter-hall-detail",
      query: {
        id: id,
        tittle: title,
      },
    });
  }

  console.log("id", id);
};
// 去登录
const onLogin = () => {
  router.push("/login");
};

const count = ref(0);
const currentPage = ref(1);
const handleSizeChange = (val) => {
  console.log(`${val} items per page`);
};
const tittle = router.currentRoute.value.query.tittle;
console.log("tittle", tittle);

// 翻页
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`);
};
const platformRrulesList = ref([]);
</script>
    
    <style scoped lang="less">
/* .read-the-docs {
      color: #000;
    } */

.platformRrules {
  display: flex;
  flex-direction: column;
  // height: 100%;
  // width: 100%;
  background: #fff;
  border-radius: 0px 0px 0px 0px;
  flex: 1;
  .content {
    // border: 1px solid red;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    .screen {
      //   border: 1px solid red;
      .screen_from {
        margin-top: 30px;
        margin-bottom: 22px;
      }
      .screen_tab {
        height: 50px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border-bottom: 1px solid #2487e8;
        width: 100%;
        display: flex;
        align-content: center;
        align-items: center;
        .screen_tab_zh {
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border: 1px solid #2487e8;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #2487e8;
          width: 100px;
          cursor: pointer;
        }
        .screen_tab_zx {
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border: 1px solid #2487e8;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #2487e8;
          width: 100px;

          cursor: pointer;
        }
        .screen_tab_xl {
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border: 1px solid #2487e8;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #2487e8;
          width: 100px;

          cursor: pointer;
        }
        .screen_tab_jg {
          height: 50px;
          line-height: 50px;
          text-align: center;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          border: 1px solid #2487e8;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #2487e8;
          width: 100px;

          display: flex;
          align-content: center;
          justify-content: center;
          align-items: center;
          cursor: pointer;

          .caretTop {
            font-size: 12px;
            margin-left: 5px;
            cursor: pointer;
            // color: #2487e8;
          }
          .oncaretTop {
            color: #d3e7fa;
            font-size: 12px;
            margin-left: 5px;
            cursor: pointer;
          }
          .caretBottom {
            font-size: 12px;
            margin-left: 5px;
            // color: #2487e8;
            cursor: pointer;

            // color: #fff;
          }
          .oncaretBottom {
            font-size: 12px;
            margin-left: 5px;
            cursor: pointer;
            color: #d3e7fa;
          }
          .on_care_click {
            color: #fff;
            cursor: pointer;
          }
        }
        .on_screen_tab {
          background: #2487e8;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }
    // 没有数据
    .none_list {
      height: calc(100vh - 504px);
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      span {
        font-size: 22px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #212121;
      }
    }

    .content_list {
      min-height: calc(100vh - 526px);
    }
    .content_text {
      background-color: #fff;
      height: 98px;
      border-radius: 0px 0px 0px 0px;
      padding: 14px 16px;
      // min-height: 570px;
      display: flex;
      //   align-items: center;
      border-bottom: 1px solid #e6e6e6;

      .content_text_img {
        width: 126px;
        height: 98px;
        border-radius: 10px 10px 10px 10px;
        img {
          height: 100%;
          width: 100%;
          border-radius: 10px 10px 10px 10px;
        }
        opacity: 1;
      }
      .content_text_tittle {
        display: flex;
        flex-direction: column;
        align-content: space-between;
        justify-content: space-between;
        margin-left: 16px;
        width: 26%;
        .biaoti {
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #212121;
        }
      }
      .content_text_info {
        display: flex;
        flex-direction: column;
        align-content: space-between;
        justify-content: space-between;
        margin-left: 16px;
        width: 26%;
        .biaoti {
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #212121;
        }
      }
      .content_text_fh {
        display: flex;
        flex-direction: column;
        align-content: space-between;
        justify-content: space-between;
        margin-left: 16px;
        width: 26%;
        .biaoti {
          font-size: 16px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #212121;
        }
      }
      .content_text_ck {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .pagination {
      height: 62px;
      padding: 0 16px;
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      border: 1px solid #e6e6e6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .total {
        height: 22px;
        font-size: 14px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #606266;
        line-height: 22px;
      }
    }
  }
  .tip-text {
    margin-bottom: 32px;
    font-size: 24px;
    font-weight: bold;
  }
  .plat_bottom {
    margin-top: 25px;
  }
}
.platformRrules::-webkit-scrollbar {
  display: none;
}
</style>
    